<template>
	<!-- 手工入库订单 -->
	<view>
		<view class="card-wrapper">
			<!-- 主表 -->
			<view class="radius shadow shadow-lg bg-white padding-sm light bg-blue">
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">集团:</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 1 ? 'solid-bottom-blue' :'' ">
						<input class="wc-input" type="text" disabled v-model="mainOrder.GROUPNAME" />
					</view>
				</view>
				<view class="flex flex-wrap margin-top" @tap="activeIndexM(2,'BA_ORGANIZE')">
					<view class="basis-xs">组织:</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 2 ? 'solid-bottom-blue' :'' ">
						<input class="wc-input" name="STORENAME" type="text" disabled v-model="mainOrder.ORGNAME" placeholder="请选择" />
						<view class="basis-xs text-right position-a down-arrow-btn">
							<text class="cuIcon-triangledownfill text-xxl text-bold" :class="activeLineIndex == 2 ? 'text-blue' :'' "></text>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap margin-top" @tap="activeIndexM(0,'BA_DEPARTMENT')">
					<view class="basis-xs">部门:</view>
					<view class="basis-xl text-black solid-bottom position-r">
						<input class="wc-input" disabled name="STORENAME" type="text" v-model="mainOrder.DEPTNAME" placeholder="请选择" />
						<view class="basis-xs text-right position-a down-arrow-btn">
							<text class="cuIcon-triangledownfill text-xxl text-bold" :class="activeLineIndex == 3 ? 'text-blue' :'' "></text>
						</view>
					</view>
				</view>

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">申请人:</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 5 ? 'solid-bottom-blue' :'' ">
						<input class="wc-input width60" disabled name="STORENAME" type="text" v-model="mainOrder.APPLYER" placeholder="请选择" />
					</view>
				</view>

				<view class="flex flex-wrap margin-top" >
					<view class="basis-xs">
						{{ mainOrder.INTYPE!=5?'供应商':'货主'  }}
						<span class="text-red">*</span>
					</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 4 ? 'solid-bottom-blue' :'' "
					 @tap="activeIndexM(4,'BD_SUPPLIER')">
						<input class="wc-input width60" disabled type="text" v-model="mainOrder.SUPPLYNAME" placeholder="请选择" />
						<view class="basis-xs text-right position-a down-arrow-btn">
							<text class="cuIcon-triangledownfill text-xxl text-bold" :class="activeLineIndex == 4 ? 'text-blue' :'' "></text>
						</view>
					</view>
				</view>

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						仓库
						<span class="text-red">*</span>
					</view>
					<view class="basis-xl text-black position-r solid-bottom" :class="isActiveStore? 'solid-bottom-blue' :'' ">
						<input class="wc-input" style="width: 60%;" name="STORENAME" type="text" v-model="mainOrder.STORENAME" disabled
						 @tap="activeIndexM(6,'BD_STORE')" placeholder="请选择" />

						<view class="basis-xs text-right position-a scan-btn" @tap="handelScan( 1,'M')">
							<text class="cuIcon-scan text-xxl text-bold"></text>
						</view>
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">入库类型:</view>
					<view class="basis-xl text-black solid-bottom" >
						<picker @change="bindPickerChangeWare" 
						:value="mainOrder.INTYPE_index || 0" :range="wareType" 
						:disabled="mainOrder.isCheckWareType"
						range-key="ItemName"
						 class="picker-wrap">
							<view>{{ wareType[mainOrder.INTYPE_index].ItemName || '请选择' }}</view>
							<text class="dicon diconxiangxiazhankai position-a down-arrow"></text>
						</picker>
					</view>
				</view>
				
				<template v-if="userInfo.USERZT == 'NXZNCC'">
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">运输方式:</view>
					<view class="basis-xl text-black solid-bottom" >
						<picker @change="bindPickerChangeYS" 
						:range="YSType" 
						range-key="name"
						 class="picker-wrap">
							<view>{{ YSType[mainOrder.TRAFFICMETHOD].name || '请选择' }}</view>
							<text class="dicon diconxiangxiazhankai position-a down-arrow"></text>
						</picker>
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">车船号:</view>
					<view class="basis-xl text-black solid-bottom" >
						<input  class="wc-input" type="text" v-model="mainOrder.CARNO" placeholder="请输入" />
					</view>
				</view>
				
				</template>

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">备注:</view>
					<view class="basis-xl text-black solid-bottom" :class="isActiveNote? 'solid-bottom-blue' :'' ">
						<input @focus="activeNote" @blur="getNote" class="wc-input" type="text" v-model="mainOrder.VMEMO" placeholder="请输入" />
					</view>
				</view>
			</view>
			<!-- 物资子表 -->

			<view class="radius shadow shadow-lg bg-white padding-sm margin-top sub-table" v-for="(item,index) in checkData"
			 :key="index">
				<view class="text-red delete-cicon" @click="removeEvent(index)">
					<i class="dicon">&#xe937;</i>
				</view>
				<view class="flex flex-wrap">
					<view class="basis-xs">物资单号</view>
					<view class="basis-xl text-black">{{ item.BILLNO }}</view>
				</view>
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">物资名称</view>
					<view class="basis-xl text-black">
						{{ item.VNAME }}
					</view>
				</view>
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">规格型号</view>
					<view class="basis-xl text-black">
						{{ item.MATSPEC }}
					</view>
				</view>

				<view class="flex flex-wrap margin-top line-height-30">
					<view class="basis-xs">
						入库数量
						<span class="text-red">*</span>
					</view>
					<view class="basis-xl solid-bottom sub-table-input">
						<input class="wc-input" v-model="item.NNUM" type="number" value="item.NNUM" placeholder="请输入到货量" />
					</view>
				</view>
				
				<template v-if="USERZT == 'NXZNCC'">
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">材质</view>
					<view class="basis-xl text-black">
						{{ item.MATQULITY || '' }}
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">产地</view>
					<view class="basis-xl text-black">
						{{ item.PRODUCTAREA || ''}}
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">重量单位</view>
					<view class="basis-xl text-black">
						{{ item.WEIGHTUNIT || ''}}
					</view>
				</view>
				
				
				</template>
				
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">数量单位</view>
					<view class="basis-xl text-black">
						{{ item.UNIT || '' }}
					</view>
				</view>
				
				

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						货位
						<span class="text-red">*</span>
					</view>
					<view class="basis-xl text-black position-r solid-bottom" :class="isActiveStore? 'solid-bottom-blue' :'' ">
						<input class="wc-input" style="width: 60%;" name="STATIONNAME" type="text" :value="item.STATIONNAME" placeholder="请选择"
						 @tap="activeIndexM(index,'BD_RACK',true)" disabled />
						<!-- {{ item.STORENAME }} -->
						<view class="basis-xs text-right position-a scan-btn" @tap="handelScan(2,index)">
							<text class="cuIcon-scan text-xxl text-bold"></text>
						</view>
					</view>
				</view>

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">生产日期</view>
					<view class="basis-xl text-black solid-bottom" @click="dateEvent('FACTORYDATE',index)">{{ item.FACTORYDATE }}</view>
				</view>

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">保质期</view>
					<view class="basis-xl text-black solid-bottom">
						<input class="wc-input" v-model="item.EXPDATE" type="text" value="item.EXPDATE" placeholder="请输入到货量" />
					</view>
				</view>

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">入库日期</view>
					<view class="basis-xl text-black" @click="dateEvent('INSTOCKDATE',index)">{{ item.INSTOCKDATE }}</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">重量</view>
					<view class="basis-xl text-black solid-bottom">
						<input class="wc-input" v-model="item.VMEMO" type="text" value="item.WEIGHTNUM" placeholder="请输入" />
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">备注</view>
					<view class="basis-xl text-black solid-bottom">
						<input class="wc-input" v-model="item.VMEMO" type="text" value="item.EXPDATE" placeholder="请输入备注" />
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						图片上传
						<span class="text-red">*</span>
					</view>
					<view class="basis-xl text-black position-r solid-bottom">
						<image :src="item.INPHOTO" mode class="input-img" @tap="previewImage(index)" />
						<view class="basis-xs text-right position-a scan-btn" @click="updateImg(index)">
							<text class="cuIcon-upload text-xxl text-bold"></text>
						</view>
					</view>
				</view>

				<view class="flex-just-center margin-top btn-wrap">
					<button class="cu-btn round lines-blue" @click.stop="submitPrint(item)">提交并打印</button>
				</view>

			</view>
		</view>
		
		<view class="operation">
			<view class="operation-button border-right" @click="finishSubmit">
				完成入库
			</view>
		</view>
		<modal title="请输入打印数量" :isShow="isShowModal" @cancelModal="cancelModal" @okModal="okModal"></modal>
		<w-picker mode="dateTime" startYear="2000" endYear="2050" step="1" :defaultVal="[1,1,1,1,2,5]" :current="true"
		 @confirm="onConfirm" ref="dateTime" themeColor="#f00"></w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import wPicker from "@/components/w-picker/w-picker.vue";
	import api from "@/common/api.js";
	import utils from "@/common/util.js";
	import modal from "@/components/modal/modal_print.vue";
	const plug = uni.requireNativePlugin('Html5app-Gprinter');
	let query = {
		category: "ST_INAPPLY",
		page: 1,
		rows: "50",
		sidx: "",
		sord: "",
		queryJson: {},
		userId: "",
		account: "admin"
	};
	let _self, dateTimekey, activeIndex, VMEMO, BILLFROM, activeType, FRBILLNO,
	qrcodeData={number:1}  ;
	export default {
		computed: mapState(["userInfo", "baseUrl", "checkData","wareType"]),
		data() {
			return {
				mainOrder: {
					PK_GROUP: "",
					GROUPNAME: "",
					PK_ORG: "",
					ORGNAME: "",
					PK_DEPT: "",
					DEPTNAME: "",
					PK_APPLYER: "",
					APPLYER: "",
					PK_SUPPLY: "",
					SUPPLYNAME: "",
					PK_STORE: "",
					STORENAME: "",
					BILLFROM: 0,
					INTYPE: 1 ,
					INTYPE_index: 0 ,
					VMEMO: "",
					userId: "",
					account: "",
					SHIPER:'',
					PK_SHIP:''
				},
				isShowModal: false,
				isActiveNote: false,
				isActiveStore: false,
				activeSub: false, // 是否点击的物资列表的仓库，货位等选择控件
				mid: "",
				today: utils.getToDay(),
				dateTimekey: "",
				// activeIndex:'',
				activeLineIndex: 0,
				label01: "单号", // 主表的第一个label BD_MATERIAL
				YSType:[
					{name:'汽运',id:'0'},
					{name:'船运',id:'1'},
				]
			};
		},
		components: {
			wPicker,
			modal
		},
		onLoad(p) {
			_self = this;
			this.initSetData();
			// console.log(this.wareType)
		},
		onShow() {

			uni.$once("updataPlace", res => {
				_self.checkData[_self.activeLineIndex].STATIONNAME = res.name;
				_self.checkData[_self.activeLineIndex].PK_STATION = res.id;
			});

			uni.$on("getSelectItem", function(data) {
				switch (activeType) {
					case "GROUP":
						_self.mainOrder.GROUPNAME = data.FullName;
						_self.mainOrder.PK_GROUP = data.OrganizeId;
						break;
					case "BA_ORGANIZE":
						_self.mainOrder.ORGNAME = data.FullName;
						_self.mainOrder.PK_ORG = data.OrganizeId;
						break;
					case "BA_DEPARTMENT":
						_self.mainOrder.DEPTNAME = data.FullName;
						_self.mainOrder.PK_DEPT = data.OrganizeId;
						break;
					case "BD_SUPPLIER":
						_self.mainOrder.SUPPLYNAME = data.VNAME;
						_self.mainOrder.PK_SUPPLY = data.BILLNO;
						
						_self.mainOrder.SHIPER = data.VNAME;
						_self.mainOrder.PK_SHIP = data.BILLNO;
						break;
					case "BA_USER":
						_self.mainOrder.APPLYER = data.RealName;
						_self.mainOrder.PK_APPLYER = data.UserId;
						break;
					case "BD_STORE": // 仓库
						if (_self.activeSub) {
							_self.checkData[_self.activeLineIndex].PK_STORE = data.BILLNO;
							_self.checkData[_self.activeLineIndex].STORENAME = data.VNAME;
						} else {
							_self.mainOrder.PK_STORE = data.BILLNO;
							_self.mainOrder.STORENAME = data.VNAME;
						}
						break;
					case "BD_RACK": // 货位
						if (_self.activeSub) {
							_self.checkData[_self.activeLineIndex].STATIONNAME = data.FULLVNAME;
							_self.checkData[_self.activeLineIndex].PK_STATION = data.BILLNO;
						}
						break;

					default:
						break;
				}
			});
		},
		onUnload() {
			uni.$off("getSelectItem", function(data) {});
		},

		onNavigationBarButtonTap(e) {
			e.index == 0 ? this.addItem() : _self.openScanMater();
		},

		methods: {
			...mapMutations(["deleteCheckData","setCheckData"]),

			// 初始化赋值
			initSetData() {
				query.userId = _self.userInfo.UserId;
				query.account = _self.userInfo.Account;
				_self.mainOrder.GROUPNAME = _self.userInfo.GROUPNAME || "";
				_self.mainOrder.PK_GROUP = _self.userInfo.PK_GROUP;
				_self.mainOrder.ORGNAME = _self.userInfo.ORGNAME;
				_self.mainOrder.PK_ORG = _self.userInfo.ORGANIZEID;
				_self.mainOrder.DEPTNAME = _self.userInfo.DEPTNAME;
				_self.mainOrder.PK_DEPT = _self.userInfo.DEPARTMENTID;
				_self.mainOrder.APPLYER = _self.userInfo.REALNAME;
				_self.mainOrder.PK_APPLYER = _self.userInfo.UserId;
				_self.mainOrder.TRAFFICMETHOD = 0
				_self.mainOrder.userId = _self.userInfo.UserId;
				_self.mainOrder.account = _self.userInfo.Account;
				console.log(_self.mainOrder);
			},
			// 扫码后查询
			handelScan(id, index) {
				let URL = api.apiPublic.ScanCode;
				let type = {
					1: '仓库',
					2: '货位'
				};
				this.$utils.Scan(URL, data => {
					console.log(data);
					if (id == 1 && data.PK_STORE) { // 获取主表的仓库
						_self.mainOrder.PK_STORE = data.PK_STORE;
						_self.mainOrder.STORENAME = data.STORENAME;
					} else if (id == 2 && data.PK_STATION) {
						_self.checkData[index].STATIONNAME = data.STATIONNAME;
						_self.checkData[index].PK_STATION = data.PK_STATION;
						if (!_self.mainOrder.PK_STORE) { // 如果仓库未选择时扫码货位带上仓库
							_self.mainOrder.PK_STORE = data.PK_STORE;
							_self.mainOrder.STORENAME = data.STORENAME;
						}
					} else {
						this.$utils.tips('未获取到二维码中的' + type[id])
					}
				});
			},
			
			// 入库类型枚举
			bindPickerChangeWare: function(e, i) {
				let val = e.target.value;
				_self.mainOrder.INTYPE = this.wareType[val].ItemValue
				_self.mainOrder.INTYPE_index = val
			},
			// 运输方式
			bindPickerChangeYS(e){
				_self.mainOrder.TRAFFICMETHOD = e.target.value
			},

			// 删除的操作
			removeEvent(i) {
				let d = this.checkData[i].myIndex + "";
				if (this.checkData.length == 1) {
					return this.$utils.tips("最后一项不可删除");
				}
				this.deleteCheckData(i);
			},

			getNote(e) {
				// console.log(e)
				VMEMO = e.target.value;
			},
			onConfirm(val) {
				this.checkData[activeIndex][dateTimekey] = val.result;
			},
			dateEvent(id, index) {
				dateTimekey = id;
				activeIndex = index;
				this.$refs.dateTime.show();
			},
			
			// 控制输入数量的对话框
			cancelModal() {
			  this.isShowModal = false;
			},
			okModal(val) {
			  qrcodeData.number = val 
				this.printerLable(qrcodeData)
			},

			// 获取位置
			getPlace(i, t, ) {
				_self.activeLineIndex = i;
				// activeType = t;
				let id = _self.mainOrder.PK_ORG;
				uni.navigateTo({
					url: "/pages/public/ztree?PK_ORG=" + id
				});
			},

			activeIndexM(i, t, activeSub) {
				_self.activeLineIndex = i;
				activeType = t;
				_self.activeSub = activeSub;
				let queryParames = "";
				if (t == "BD_RACK" && !_self.mainOrder.STORENAME) {
					return _self.$utils.tips("请先选择仓库");
				} else if (t == "BD_RACK") {
					queryParames = JSON.stringify({
						PK_STORE: this.mainOrder.PK_STORE
					});
				}else if (t == "BA_ORGANIZE") {
					uni.navigateTo({
						url: "/pages/public/search?t=" + t + '&organizeId='+_self.mainOrder.PK_GROUP + "&queryjson=" + queryParames
					});
					return ;
				}
				console.log(78, _self.mainOrder.PK_ORG);
				uni.navigateTo({
					url: "/pages/public/search?t=" + t + "&queryjson=" + queryParames
				});
			},
			// 打印 提交
			submitPrint(item) {
				// console.log(item);
				
				if(_self.mainOrder.INTYPE==5  && _self.mainOrder.PK_SHIP=='' ){
					return this.$utils.tips("请选择货主");
				}
				
				if (!item.NNUM) {
					return this.$utils.tips("请输入入库数量");
				} else if (!item.PK_STATION) {
					return this.$utils.tips("货位不能为空");
				} else if (!item.INPHOTO) {
					return this.$utils.tips("请上传入库图片");
				}
				let savedata = {
					..._self.mainOrder,
					Detail: _self.checkData
				};
				let TNT = `TYPE:3|${item.PK_ORG}|${_self.mainOrder.PK_STORE}|${item.PK_STATION}|`;
				qrcodeData = {
					name: item.VNAME,
					type: item.MATSPEC,
					bcode: '',
					qcode: TNT
				}
				// console.log(data)
				this.axios({
					url: api.apiPublic.saveInStore,
					data: savedata,
					isLoading: 1,
				}).then(res => {
					let {
						Message,
						Result
					} = res;
					console.log(7,res);
					FRBILLNO = Result[0].BILLNO
					qrcodeData.bcode = Result[0].DTL[0].BARCODE
					qrcodeData.qcode += qrcodeData.bcode
					_self.isShowModal = true ;
					// _self.printerLable(qrcode);
				})
			},
			// 打印标签
			printerLable(data) {
				plug.printer({
					"TSC": _self.$utils.LableSet(data)
				}, ret => {
					// console.log(JSON.stringify(ret));
					if (ret.state == 1) {
						return _self.$utils.tips(ret.msg)
					} else if (ret.state == 2) {
						// _self.getDetail();
					}
				});
			},

			// 完成入库提交
			finishSubmit() {
				if(!FRBILLNO){
					return _self.$utils.tips('请先提交并打印')
				}
				let saveData = {
					BILLNO: FRBILLNO,
					TYPE:'ST_PURINSTORE' ,
					userId: _self.userInfo.UserId,
					account: _self.userInfo.Account
				}
				console.log(saveData);
				let URL = '/api/APPCommon/FinishBillSubmit';
				this.axios({
					url: URL,
					data: saveData,
					isLoading: 1
				}).then(res => {
					let {
						Message,
						Result
					} = res;
					_self.$utils.tips('提交成功')
					_self.setCheckData([])
					setTimeout(r => {
						uni.navigateBack({})
					}, 1600)
				})
			},


			activeNote() {
				_self.isActiveNote = true;
			},
			addItem() {
				// uni.$emit('refreshList');
				uni.navigateBack({});
			},
			openScan(id, index) {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						// console.log(res)
						if (res.scanType != "QR_CODE") {
							return uni.showToast({
								icon: "none",
								title: "类型错误，请重新扫描"
							});
						}
						let t = res.result.replace(/'/g, '"');
						let data = JSON.parse("{" + t + "}");
						let sid = "PK_" + id,
							sname = id + "NAME";
						if (id == "msid") {
							_self.mainOrder.PK_STORE = data.PK_STORE;
							_self.mainOrder.STORENAME = data.STORENAME;
						} else if (id == "STORE") {
							_self.checkData[index][sname] = data.STORENAME;
							_self.checkData[index][sid] = data.PK_STORE;
						} else if (id == "STATION") {
							_self.checkData[index][sname] = data.STATIONNAME;
							_self.checkData[index][sid] = data.PK_STATION;
							_self.mainOrder.PK_STORE = data.PK_STORE;
							_self.mainOrder.STORENAME = data.STORENAME;
						}
					}
				});
			},

			// 图片上传
			updateImg(i) {
				_self.activeIndex = i;
				_self.$utils.uploadImg( function(e) {
					// console.log(e);
					_self.checkData[_self.activeIndex].INPHOTO = e;
					// console.log(_self.checkData[_self.activeIndex].INPHOTO);
				});
			},
			// 图片查看
			previewImage(i) {
				let imglist = this.checkData[i].INPHOTO;
				_self.$utils.previewImage(imglist);
			},


		}
	};
</script>

<style>
	page{
		padding-bottom: 150rpx;
	}
	 .card-wrapper {
		padding: 26upx;
	}

	.line-height-30 {
		line-height: 24px !important;
	}



	.sub-table-input {
		margin-top: 10upx;
	}

	.width60 {
		width: 60%;
	}

	.down-arrow-btn {
		top: -20upx;
		right: 0upx;
		font-size: 40upx;
		padding: 10upx;
	}

	.add-btn-wrap {
		position: fixed;
		bottom: 100upx;
		right: 50upx;
	}

	.add-btn-wrap .cuIcon-add {
		font-size: 50upx;
	}
</style>
